<script src="../pages/dataMessage/main.js"></script>
<template>
  <div class="cartBox" @click="goDetail"  :class="{active:isLang}" :style="{backgroundImage:'url('+data.bgUrl+')'}">

<!--                  <div class="addCard" @click.stop="addBox" v-if="isShow">-->
<!--                    <img src="../../static/images/creat.png" alt="">-->
<!--                  </div>-->
<!--    <p style="font-size: 38rpx;margin:20rpx 0 30rpx 0;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;"> {{data.company}}</p>-->

    <p class="conpanyName" > {{data.company}}</p>
    <div class="cart_top">
      <div class="cart_name">

        <p class="nameBox"  > {{data.name}}</p>
        <p style="color: #fff;font-weight: normal;display: flex;justify-content: flex-start;align-items: center;box-sizing: border-box;padding-right: 24rpx;" >
<!--          <img src="../../static/images/phone.png" alt="" style="width: 16px;height:16px;margin-right:76rpx;" @click.stop="callPhone(data.mobile)">-->
          <img style="width:23px;height:23px;color: #fff;margin-right:76rpx;" @click.stop="callPhone(data.mobile)" src="../icons/svg/phone.svg"/>
          <span>{{data.mobile}}</span>

        </p>

      </div>
      <!--        <img src="../../../static/images/user.png" alt="">-->
<!--      上传图片-->
      <div class="weui-uploader__bd" style="width:34%">
        <ul class="weui-uploader__files" id="uploaderFiles">
          <li class="weui-uploader__file weui-uploader__file_status"  v-if="data.logo"  :style="{backgroundImage:'url('+data.logo+')'}" >
<!--            <div class="weui-uploader__file-content" @click="remove(index)">-->
<!--              <i class="weui-icon-warn"></i>-->
<!--            </div>-->
          </li>
          <li class="weui-uploader__file weui-uploader__file_status"  v-else  :style="{backgroundImage:'url('+userInfo.avatarUrl+')'}" >
            <!--            <div class="weui-uploader__file-content" @click="remove(index)">-->
            <!--              <i class="weui-icon-warn"></i>-->
            <!--            </div>-->
          </li>


        </ul>

      </div>

    </div>
    <div class="cart_bt" style="margin-top:22rpx" v-if="isLang">
      <ul class="list">
<!--        <li style="color: #508CEE"><img src="../../static/images/job.png" alt="">-->
<!--          <span style="font-weight: bold;font-size: 30rpx;"  v-if="data.position">{{data.position}}</span>-->
<!--          <span style="font-weight: bold;font-size: 30rpx;"  v-if="!data.position">暂未填写职务</span>-->
<!--        </li>-->
        <li style="color: #fff">
          <img style="font-size: 38px;color: #fff" src="../icons/svg/location.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.address">{{data.address}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.address">暂未填写公司地址</span>
        </li>
        <li style="color: #fff">
          <img style="font-size: 32px;color: #fff" src="../icons/svg/email.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.email">{{data.email}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.email">暂未填写邮箱</span>
        </li>

        <li style="color: #fff">
          <img style="width:20px;height:20px;color: #fff" src="../icons/svg/chuanzhen.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.fax">{{data.fax}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.fax">暂未填写公司传真</span>
        </li>
      </ul>
    </div>
     <p class="more">
<!--     <span style="color: #508CEE" @click="translateText(name,'English')">English/中文</span>-->
       </p>
    <van-icon :name="isLang?'arrow-up':'arrow-down'" />
  </div>
</template>

<script>
  import * as appId from "../utils/api"

    export default {
      name: 'mb1',
      props: ['data', 'isShow','empId','isMeIndex','widthItem','fax'],
      data () {
        return {
          images: [],
            isLang:false,
          userInfo:{}
        }
      },
      onReady(){
        this.userInfo=wx.getStorageSync('userInfo')&&JSON.parse(JSON.parse(wx.getStorageSync('userInfo')));

      },
	  onShow () {
	  	//console.log(this.data)
	  },
    methods: {
      translateText (text, language) {
        // alert(text)
        this.$http.request({
          methods: 'get',
          url: 'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20191206T030625Z.6bbf4162ceb4c990.ccfdda13656c5603daac24eff79dbda2bc69cb9e&lang=' + language + '&text=' + text
        }).then((data) => {

        })
      },
        callPhone(phone){
            wx.makePhoneCall({
                phoneNumber: phone //仅为示例，并非真实的电话号码
            })
        },
      init(id){
        console.log(id)
      },
        addBox () {
          if(this.isMeIndex){
              wx.navigateTo({ url: '/pages/index/main' })
          }else{
              let shareData= JSON.parse(wx.getStorageSync('shareData'))
              let Authorization= wx.getStorageSync('Authorization')
              let cartId=wx.getStorageSync('cartId')
              let userId= wx.getStorageSync('userId')
              wx.reLaunch({url:`/pages/index/main?Authorization=${Authorization}&cartId=${cartId}&userId=${userId}`})
          }

        },
        goDetail () {
            this.isLang=!this.isLang;

        },
        handleImagePreview (img, index) { // 预览图片
          const idx = index
          const images = this.images
          console.log(images)
          wx.previewImage({
            current: images[idx], // 当前预览的图片
            urls: images // 所有要预览的图片
          })
        },
        upload (e) {
          var that = this
    let i = 0
          let upLength // 图片数组长度
    let imgFilePaths
    wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
            // console.log(res)
            // that.images.push(res.tempFilePaths[0])
            // // that. urlTobase64(res.tempFilePaths[0])
            // let len = that.files.concat(res.tempFilePaths);
              imgFilePaths = res.tempFilePaths
              upLength = imgFilePaths.length
              // if(len.length > max){
              //   that.$mptoast('图片最多只能选择' + max);
              //   return false;
              // }
              /**
         * 上传完成后把文件上传到服务器
         */
              wx.showLoading({
                title: '上传中...'
              })
              that.upLoad(imgFilePaths, i, upLength)
            }
          })
        },
        upLoad (imgPath, i, upLength) {
          let that = this
    let token = wx.getStorageSync('Authorization')
          // 上传文件
          wx.uploadFile({
            url: `${appId.appId}/api/qiniu/upload`,
            filePath: imgPath[i],
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data'

            },
            formData: {
              'Authorization': `Bearer ${token}`
            },
            success: function (res) {
              console.log('上传成功' + i)
              // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
              // that.files = that.files.concat(imgPath[i]);        //合并图片显示数组
              // let imgData = JSON.parse(res.data);
              // that.upImg.push(imgData.data);
              console.log(res)
            },
            fail: function (res) {
              console.log(res)
              wx.hideLoading()
              wx.showModal({
                title: '错误提示',
                content: '上传图片失败',
                showCancel: false,
                success: function (res) { }
              })
            },
            complete: function () {
              i++
              if (i == upLength) {
                wx.hideLoading() // 上传结束，隐藏loading
              } else {
                that.upLoad(imgPath, i, upLength)
              }
            }
          })
    },
        remove (inex) {
          this.images.splice(inex, 1)
        }
    }
    }
</script>

<style scoped>
  .list{
    font-size: 26rpx;
      box-sizing: border-box;
      padding-left: 34rpx;
  }
  .list>li{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    margin-bottom: 28rpx;
  }
  .list>li>img{
    width: 16px;
    height:16px;
    margin-right: 20rpx;
  }
  .cart_top{
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .cart_top .weui-uploader__input-box{
    width: 120rpx;
    height: 120rpx
  }
  .cartBox .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cart_name>p:first-child{
    margin-bottom: 30rpx;
    font-size: 45rpx;
  }
  .cartBox .weui-uploader__file{
    width:  150rpx;
    height: 150rpx;
    border-radius: 20rpx;
    margin-top:5rpx;
  }
  .cart_name{
    font-weight: bold;
    width: 100%;
    font-size: 35rpx;
    box-sizing: border-box;
    padding-left:34rpx;
  }
  .cart_name>p{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .addCard{
    position: absolute;
    top:199rpx;
    right:30rpx;
    width: 80rpx;
    height:80rpx;
    background-color: #efeff4;
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
  }
  .addCard>img{
    width:60rpx;
    height: 60rpx;
  }
  .cartBox .conpanyName{
      font-size: 38rpx;
      margin:20rpx 0 30rpx 0;
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      box-sizing: border-box;
      padding-left: 34rpx;
  }
  .cartBox .nameBox{
      font-family: 'KaiTi';
      color: #fff;
      font-weight: normal;
      margin-bottom:22rpx;
      margin-top:10rpx;
      box-sizing: border-box;
      padding-left: 120rpx;
  }
  .cartBox{
    width: 90%;
    height:400rpx ;
    /*background-color: #;*/
    overflow: hidden;
    transition: all 0.5s;
    color: #fff;
    margin:0 auto;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #999;
    border: 1px solid #000;
    /*border: 5px solid rgb(61,176,243);*/
    /*border-bottom: 5px solid rgb(61,176,243);*/
    box-sizing: border-box;
    padding:25rpx;
    /*background:#f7f7f7 url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577982769895&di=2b65bd6b72e73c15f936d4ddfedaaccf&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F52%2F00%2F6357931b6ead28e.jpg") no-repeat;*/
    background:#f7f7f7 url("https://img.xbdzmp.com/20200112010646ebd5b6556012.jpg") no-repeat;
    background-size: auto;
  }
  .cartBox.active{
    height:590rpx;
    transition: all 0.5s;
  }
  .cartBox .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cartBox.active ._van-icon{
    top:537rpx;
  }
  .cartBox .weui-uploader__file{
    width:  150rpx;
    height: 150rpx;
    border-radius: 20rpx;
    margin-top:5rpx;
  }
  .cartBox ._van-icon{
    width: 20px;
    height: 20px;
    position:absolute;
    top:337rpx;
    right:48%;
  }
  .cartBox .more{
    text-align: right;
    position: absolute;
    right: 30rpx;
    bottom:13rpx;
    font-size: 28rpx;
  }
</style>
